<template>
  <div class="content-block">
    <div class="info-head">
      {{ title }}
    </div>
    <div class="info-content">
      <div class="flex" :style="{overflow: showRank ? null : 'hidden'}">
        <div class="lines-block padding" :style="{width: showRank ? 'calc(100% - 600px)' : '100%'}">
          <line-chart
            ref="chart"
            :unit-name="unit"
            :title="lineTitle"
            :height="height"
            :x-data="linesXData"
            :y-data="linesYData"
            :lines="lines"
            :download-func="exportLinesData"
            :show-download-tool="false"
          ></line-chart>
        </div>
        <div v-if="showRank" class="pie-block padding" :style="{ width: showRank ? '600px': 0, height: height }">
          <pie-chart
            ref="pie"
            :title="pieData.name"
            :data="pieData.data"
            :download-func="exportPieData"
            :show-download-tool="false"
          ></pie-chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getEnergyConsumptionChart,
  getEnergyConsumptionTop
} from '@/api/energyConsumption';
import LineChart from '@/views/data-presentation-overview/line-chart';
import PieChart from '@/views/data-presentation-overview/pie-chart';

export default {
  components: {
    LineChart,
    PieChart
  },
  props: {
    title: String,
    unit: String,
    time: String,
    timeType: String,
    /** 能源种类 */
    type: String,
    /** 能源种类名称 */
    typeName: String,
    height: {
      type: String,
      default: '500px'
    },

    /** 是否显示排名 */
    showRank: {
      type: Boolean,
      default: true
    },
    enterpriseId: [String, Number]
  },
  data() {
    return {
      linesData: {},
      pieData: {
        name: '',
        data: []
      },
    };
  },
  computed: {
    lineTitle() {
      return this.linesData.name || '';
    },
    lines() {
      return [
        {
          name: this.typeName
        }
      ];
    },
    linesXData() {
      return (this.linesData.xaxis || {}).data || [];
    },
    linesYData() {
      return this.linesData.series
        ? (this.linesData.series || []).map(v => v.data)
        : [];
    }
  },
  watch: {
    timeType () {
      this.getData();
    }
  },
  methods: {
    getData() {
      this.getLineData();
      this.getPieData();
    },
    async getLineData() {
      if (this.type && this.timeType && this.time) {
        this.$refs.chart && this.$refs.chart.setLoading(true);
        try {
          const { data } = await getEnergyConsumptionChart(
            this.type,
            this.timeType,
            this.time,
            this.enterpriseId,
          );
          this.linesData = data;
        } catch (e) {
          console.warn(e);
        } finally {
          this.$nextTick(() => {
            this.$refs.chart && this.$refs.chart.setLoading(false);
          });
        }
      }
    },
    async getPieData() {
      if (!this.showRank) return;
      if (this.type && this.timeType && this.time) {
        this.$refs.pie && this.$refs.pie.setLoading(true);
        try {
          const { data } = await getEnergyConsumptionTop(
            this.type,
            this.timeType,
            this.time
          );
          this.pieData = data;
        } catch (e) {
          console.warn(e);
        } finally {
          this.$nextTick(() => {
            this.$refs.pie && this.$refs.pie.setLoading(false);
          });
        }
      }
    },
    exportPieData() {},
    exportLinesData() {}
  }
};
</script>
